<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script>
      <script>
  $(function(){
	
	   $('#tab1').tab({defaultIndex:0,activeClass:"tab-green"});
	    $('#tab2').tab({defaultIndex:2,activeClass:"tab-red"});
	   $('#tab3').tab({defaultIndex:0,activeClass:"tab-blue"});
	   $('#tab4').tab({defaultIndex:0,activeClass:"tab-blue "}); $('#tab5').tab({defaultIndex:1,activeClass:"bg_green"});$('#tab6').tab({defaultIndex:2,activeClass:"bg_red"});
	  });    
      
      </script>
</head>

<body ontouchstart style="background-color: #f8f8f8;">
        <div class="weui_tab " style="height:44px;" id="tab1"><!--tab-fixed添加顶部-->
            <div class="weui_navbar" style="height:44px;">
                <div class="weui_navbar_item  ">
                    已发货
                </div>
                <div class="weui_navbar_item">
                    未发货
                </div>
                <div class="weui_navbar_item">
                    全部订单
                </div>
            </div>
        </div>
  <h3>分隔样式</h3>
        <div class="weui_tab "  style="height:44px;" id="tab2">
            <div class="weui_navbar" style="height:44px;">
                <div class="weui_navbar_item  ">
                    已发货
                </div>
                <div class="weui_navbar_item">
                    未发货
                </div>
                <div class="weui_navbar_item ">
                    全部订单
                </div>
            </div>
        </div>
        
          <h3>分隔样式</h3>
          
          
         <div class="weui_tab" style="height:44px;" id="tab3" >
            <div class="weui_navbar" style="height:44px;">
                <div class="weui_navbar_item ">
                    选项一
                </div>
                <div class="weui_navbar_item">
                    选项二
                </div>
                <div class="weui_navbar_item">
                    选项三
                </div>
                <div class="weui_navbar_item">
                    选项四
                </div>
                <div class="weui_navbar_item">
                    选项五
                </div>
            </div>
        </div>       
        
   <h3 >分隔样式</h3>
   
   
        <div class="weui_tab" style="height:44px;"   id="tab4">
            <div class="weui_navbar" style="height:44px;">
                <div class="weui_navbar_item ">
                    选项一
                </div>
                <div class="weui_navbar_item">
                    选项二
                </div>
                <div class="weui_navbar_item">
                    选项三
                </div>
            </div>
            <div class="weui_tab_bd">
        <div class="weui_tab_bd_item">
            选项一内容
        </div>
        <div class="weui_tab_bd_item">
            选项二内容
        </div>
        <div class="weui_tab_bd_item">
            选项三内容
        </div>
            </div>
        </div>
        
           <h3 >分隔样式</h3>
 <div class='page-hd' >         
<div class="weui_tab" style="height:44px;"   id="tab5">        
<div class="weui_tab_nav"> <a href="javascript:" class="weui_navbar_item weui_nav_green"> 中国 </a> <a href="javascript:" class="weui_navbar_item weui_nav_green"> 美国 </a> <a href="javascript:" class="weui_navbar_item weui_nav_green"> 小日本 </a> </div>        
 </div> 
 
          
<div class="weui_tab" style="height:44px;"   id="tab6">        
<div class="weui_tab_nav"> <a href="javascript:" class="weui_navbar_item weui_nav_red"> 中国 </a> <a href="javascript:" class="weui_navbar_item weui_nav_red"> 美国 </a> <a href="javascript:" class="weui_navbar_item weui_nav_red"> 小日本 </a> </div>        
 </div> 
 
 
 
 
 
 
 
 </div>
 
 
 
       
</body>
</html>
